<!--
 * @Author: ShengXD <1519256482@qq.com>
 * @Date: 2024-11-07 11:15:29
 * @LastEditors: ShengXD <1519256482@qq.com>
 * @LastEditTime: 2024-11-12 09:01:04
 * @FilePath: /zonmind-om/apps/app/src/views/authentication/login.vue
 * @Description: 
-->
<script lang="ts" setup>
import type { VbenFormSchema } from '@vben/common-ui';
import type { BasicOption } from '@vben/types';
import { preferences, usePreferences } from '@vben/preferences';

import { computed, markRaw } from 'vue';

import { AuthenticationLogin, SliderCaptcha, z } from '@vben/common-ui';

import LoginByCode from './loginByCode.vue';
import LoginByPwd from './loginByPwd.vue';
import { $t } from '@vben/locales';
import Slogan from './slogan.vue';

import { useAuthStore } from '#/store';

defineOptions({ name: 'Login' });

const { isDark } = usePreferences();

const formLoginCodeSchema = computed((): VbenFormSchema[] => {
  return [
    {
      component: 'Input',
      componentProps: {
        placeholder: $t('authentication.mobile'),
      },
      fieldName: 'phoneNumber',
      label: $t('authentication.mobile'),
      rules: z
        .string()
        .min(1, { message: $t('authentication.mobileTip') })
        .refine((v) => /^\d{11}$/.test(v), {
          message: $t('authentication.mobileErrortip'),
        }),
    },
    {
      component: 'VbenPinInput',
      componentProps: {
        createText: (countdown: number) => {
          const text =
            countdown > 0
              ? $t('authentication.sendText', [countdown])
              : $t('authentication.sendCode');
          return text;
        },
        placeholder: $t('authentication.code'),
      },
      fieldName: 'code',
      label: $t('authentication.code'),
      rules: z.string().min(1, { message: $t('authentication.codeTip') }),
    },
  ];
});
const authStore = useAuthStore();

const formLoginSchema = computed((): VbenFormSchema[] => {
  return [
    {
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: $t('authentication.usernameTip'),
      },
      defaultValue: '13958258588',
      fieldName: 'username',
      label: $t('authentication.username'),
      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
    },
    {
      component: 'InputPassword',
      componentProps: {
        placeholder: $t('authentication.password'),
      },
      defaultValue: '123456',
      fieldName: 'password',
      label: $t('authentication.password'),
      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
    },
    {
      component: markRaw(SliderCaptcha),
      fieldName: 'captcha',
      rules: z.boolean().refine((value) => value, {
        message: $t('authentication.verifyRequiredTip'),
      }),
    },
  ];
});

async function handleSubmit() {
  // const { valid } = await formApi.validate();
  // const values = await formApi.getValues();
  // if (valid) {
  //   localStorage.setItem(
  //     REMEMBER_ME_KEY,
  //     rememberMe.value ? values?.username : '',
  //   );
  //   emit('submit', values);
  // }
}

const appName = computed(() => preferences.app.name);
const logo = computed(() => preferences.logo.source);

</script>

<template>
  <div
    :class="[isDark]"
    class="flex min-h-full flex-1 select-none overflow-x-hidden"
  >
    <div class="absolute left-0 top-0 z-10 flex flex-1">
      <div
        class="text-foreground lg:text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
      >
        <img alt="1" :src="logo" class="mr-2" width="42" />
        <p class="text-xl font-medium">
          {{ appName }}
        </p>
      </div>
    </div>

    <div class="relative w-0 flex-1 lg:block">
      <div
        class="bg-background-deep absolute inset-0 h-full w-full dark:bg-[#070709]"
      >
        <div class="login-background absolute left-0 top-0 size-full"></div>
        <div class="flex-col-center -enter-x mr-20 h-full">
          <Slogan class="animate-float h-64 w-2/5" />
          <div class="text-1xl text-foreground mt-6 font-sans lg:text-2xl">
            {{ `欢迎使用` }}
          </div>
          <div class="dark:text-muted-foreground mt-2">
            {{ '2222' }}
          </div>
        </div>
      </div>
    </div>

    <div
      class="flex-col-center dark:bg-background-deep bg-background relative w-[34%] px-6 py-10 lg:flex-initial lg:px-20"
    >
      <div class="enter-x mt-6 w-full sm:mx-auto md:max-w-md">
        <div class="mb-7 sm:mx-auto sm:w-full sm:max-w-md">
          <h2
            class="text-foreground mb-3 text-3xl font-bold leading-9 tracking-tight lg:text-4xl"
          >
            {{ $t('authentication.welcomeBack') }}
          </h2>

          <p class="text-muted-foreground lg:text-md text-sm">
            <span class="text-muted-foreground">
              {{ $t('authentication.codeSubtitle') }}
            </span>
          </p>
        </div>
        <LoginByPwd
          :form-schema="formLoginSchema"
          :loading="authStore.loginLoading"
          @submit="authStore.authLogin"
        />
        <!-- <LoginByCode
          :form-schema="formLoginCodeSchema"
          :loading="authStore.loginLoading"
          @submit="authStore.authLogin"
        /> -->

        <!-- 
      <Copyright
        v-if="preferences.copyright.enable"
        v-bind="preferences.copyright"
      /> -->
      </div>
    </div>
  </div>
</template>

<style scoped>
.login-background {
  background: linear-gradient(
    154deg,
    #07070915 30%,
    hsl(var(--primary) / 30%) 48%,
    #07070915 64%
  );
  filter: blur(100px);
}

.dark {
  .login-background {
    background: linear-gradient(
      154deg,
      #07070915 30%,
      hsl(var(--primary) / 20%) 48%,
      #07070915 64%
    );
    filter: blur(100px);
  }
}
</style>
